<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <style type="text/css">
        body{margin: 0;padding:0;background-color: #f9faee}
        .square .center-block{
            width:500px;
            height:300px;
            background-color: #c9d8b9;
            border-radius: 10%;
            margin: 0px auto;
        }
        .square .shuru>input{
            margin: 0 160px 0;
            height: 28px;
            border-radius: 12px;
            background-color: #8aaf6c;
            color: white;
            border: 1px solid rgba(138,175,108,0);
            padding: 5px 1px;
            outline: none;
            font-size: 15px;
        }
        .square .shuru>p{
            color: #204f82;
            margin: 15px 165px 10px;
        }
        .login:hover{
            transform: scale(1.05,1.05);
            box-shadow: #ecdeba;
        }
    </style>
</head>
<body>
<div class="square" >
    <p style="font-family:arial;font-size:60px;text-align: center;
            font-style: oblique;color: #198377; margin: 80px auto;
            font-weight: bold" >Welcome to the Web</p>
    <div class="center-block">
        <p style="font-family:arial;font-size: 30px;color: #104e8b;font-weight: bolder;
         margin: 0 auto 20px;text-align:center">Login</p>
        <form class="shuru" action="{% url "um:login" %}" method="post">
            {% csrf_token %}
            <p>name:</p>
            <input   type="text" placeholder="请输入用户名" name="username">
            <p>password:</p>
            <input type="password" placeholder="请输入密码" name="password">

            <button class="login" style="height: 30px;width: 80px;margin: 20px 210px;
            background-color: #78a27e;border-color: rgba(120,162,126,0);
            color: #fbfaf6;border-radius: 5px">登陆</button>

        </form>
        <a style="color: #104e8b;background-color: #99c4bb;border-radius: 5px;
        float: left;margin: -15px 50px 10px" href="http://127.0.0.1:8000/um/register/" target="_blank">注册</a>
    </div>
</div>
</body>
</html>